import React ,{ useState } from 'react'
import { NavBar, Toast, Input,Form,Button} from 'antd-mobile'
import  styles from './index.less'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { register } from '../../api/user'
export default function Register() {
  const [visible, setVisible] = useState(false)

  //返回按钮
  const back = () =>
  Toast.show({
    content: '点击了返回区域',
    duration: 1000,
  })

  return (
    <div>
        <NavBar onBack={back}></NavBar>
        <div className="reg-header">
            <h2>注册</h2>
        </div>
        <div className={styles.register_main}>
          {console.log(styles)}
          <Form 
          layout='horizontal'
          name='form'
          onFinish={register}
          footer={
            <Button block type='submit' color='primary'>注册</Button>
          }> 
            <Form.Item label='手机号' name='telphone'>
              <Input placeholder='请输入手机号' clearable />
            </Form.Item>
            
            <Form.Item
              label='短信验证码'
              extra={
                <div className={styles.extraPart}>
                  {/* <a>发送验证码</a> */}
                  发送验证码
                </div>
              }
            >
              <Input placeholder='请输入验证码' clearable />
            </Form.Item>

            <Form.Item
              label='密码'
              name='password'
              extra={
                <div className={styles.eye}>
                  {!visible ? (
                    <EyeInvisibleOutline onClick={() => setVisible(true)} />
                  ) : (
                    <EyeOutline onClick={() => setVisible(false)} />
                  )}
                </div>
              }
            >
              <Input
                placeholder='请输入密码'
                clearable
                type={visible ? 'text' : 'password'}
              />
            </Form.Item>
          </Form>
        </div>
     
    </div>
  )
}
